<template>
    <div>
        <el-table
                v-loading="loading"
                :data="dataList"
                :highlight-current-row="highlightCurrentRow"
                @current-change="handleCurrentRowChange"
                :header-cell-style="headerCellStyle"
                stripe
                style="width: 100%">
            <el-table-column v-for="(item, i) in columns" :key="i"
                             :prop="item.prop"
                             :label="item.label"
                             :width="item.width"
                             :type="item.type"
                             :fixed="item.fixed"
                             :align="item.align"
                             :render-header="item.headRender"
                             :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <TableColumnExpand
                            v-if="item.render"
                            :render="item.render"
                            :row="scope.row"
                            :index="i"
                            :column="item">
                    </TableColumnExpand>
                    <span v-else>{{scope.row[item.prop]}}</span>
                </template>
            </el-table-column>

        </el-table>
        <div style="padding: 10px 0; text-align: right; display: flex; justify-content: center;">
            <div style=" margin-right:auto;align-self: center;">
                <el-select v-model="pageSize" size="mini" style="width: 60px"
                           @change="handlePageSizeChange">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <span style="padding: 0 0 0 8px;font-size: 14px">Total: {{ totalRow }}</span>
            </div>

            <el-pagination style="margin-left:auto"
                    background
                    layout="prev, pager, next"
                    :total="totalRow"
                    :current-page="current" :page-size="pageSize"
                    @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import TableColumnExpand from '@/components/TableColumnExpand';

    export default {
        name: 'PaginationTable',
        components: {
            TableColumnExpand
        },
        props: {
            data: {
                type: Object,
                default() {
                    return {};
                }
            },
            columns: {
                type: Array,
                default() {
                    return [];
                }
            },
            loading: {
                type: Boolean,
                default() {
                    return false;
                }
            },
            highlightCurrentRow: {
                type: Boolean,
                default() {
                    return false;
                }
            },
            headerCellStyle: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.$emit("onPageSizeChange", this.pageSize);
            });
        },
        watch: {
            data: {
                handler: function (newVal) {
                    this.dataList = newVal.list;
                    this.totalRow = newVal.total_row;
                    this.current = newVal.page_number;

                    if(newVal.total_page != 0 && newVal.page_number > newVal.total_page) {
                        this.handleCurrentChange(1);
                    }
                },
                deep: true,
                immediate: true
            }
        },
        data() {
            return {
                dataList: [],
                totalRow: 0,
                current: 1,
                pageSize: 10,
                options: [{
                    value: 10,
                    label: 10
                }, {
                    value: 20,
                    label: 20
                }, {
                    value: 40,
                    label: 40
                }, {
                    value: 80,
                    label: 80
                }],
            }
        },
        methods: {
            handleCurrentChange(currentPage) {
                this.$emit("onCurrentChange", currentPage);
            },
            handleCurrentRowChange(row) {
                this.$emit("currentRowChange", row);
            },
            handlePageSizeChange(value) {
                this.$emit("onPageSizeChange", value);
            }
        }
    }
</script>
